<template>
  <div class="login-page">
    <div class="login-background">
      <picture>
        <img src="http://www.jmu.edu.cn/images/yuandan1.png" alt="登录背景图片">
      </picture>
    </div>
    <div class="login-container">
      <el-card class="login-card">
        <h2 class="login-title">登录</h2>
        <el-form :model="loginForm" status-icon :rules="rules" ref="loginFormRef" label-width="80px" @submit.native.prevent="login">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" native-type="submit">登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-link type="primary" :underline="false" @click="resetForm">重置</el-link>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>


<script>
import axios from 'axios';


export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    async login() {
      try {
        // 表单验证
        this.$refs.loginFormRef.validate(async (valid) => {
          if (valid) {
            // 发送登录请求
            const response = await axios.post('http://localhost:8080/login', {
                  username: this.loginForm.username,
                  password: this.loginForm.password
              }, {
                  headers: {
                      'Content-Type': 'application/x-www-form-urlencoded'
                  }
              });


            if (response.data.code === 1) {
              // 登录成功，可根据需要进行后续操作，如存储 token 或跳转到其他页面
              console.log("登录成功");
              this.$router.push({ name: 'students' });
            } else {
              // 登录失败，显示错误信息
              this.$message.error(response.data.msg);
            }
          } else {
            this.$message.warning('请输入正确的用户名和密码');
          }
        });
      } catch (error) {
        // 处理网络或其他异常
        this.$message.error('登录失败，请检查网络或联系管理员');
      }
    },
    resetForm() {
      this.$refs.loginFormRef.resetFields();
    }
  }
};
</script>


<style scoped>
.login-page {
  position: relative;
  width: 100%;
  height: 100vh;
}


.login-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  display: flex;
}


.login-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.login-container {
  position: absolute;
  right: 0;
  top: 70%;
  transform: translateY(-50%);
  width: 300px;
  padding: 20px;
}


.login-card {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


.login-title {
  text-align: center;
  margin-bottom: 20px;
}
</style>